<template>
  <view class="container">
    <view class="example">
      <uni-forms ref="form" :model="form" labelWidth="80px">
        <uni-forms-item label="名称" name="artifactName">
          <u--text type="primary" :text="form.artifactName" />
        </uni-forms-item>
        <uni-forms-item label="图片">
          <u-album :urls="getUrl(form.photoUrl)" keyName="src2"></u-album>
        </uni-forms-item>
        <uni-forms-item label="分类" name="category">
          <u--text type="primary" :text="form.category" />
        </uni-forms-item>
        <uni-forms-item label="年代" name="period">
          <u--text type="primary" :text="form.period" />
        </uni-forms-item>
        <uni-forms-item label="文物的发现地" name="origin">
          <u--text type="primary" :text="form.origin" />
        </uni-forms-item>
        <uni-forms-item label="尺寸" name="dimensions">
          <u--text type="primary" :text="form.dimensions" />
        </uni-forms-item>
        <uni-forms-item label="重量" name="weight">
          <u--text type="primary" :text="form.weight" />
        </uni-forms-item>
        <uni-forms-item label="材质" name="material">
          <u--text type="primary" :text="form.material" />
        </uni-forms-item>
        <uni-forms-item label="收藏时间" name="acquisitionDate">
          <u--text type="primary" :text="form.acquisitionDate" />
        </uni-forms-item>
        <uni-forms-item label="描述" name="description">
          <u--text type="primary" :text="form.description" />
        </uni-forms-item>
        <uni-fav style="margin-left: 35%;width: 100px;" :contentText="{contentDefault: '点击收藏',contentFav: '取消收藏'}" bgColor="#007aff" fgColor="#FFFFFF" bgColorChecked="#dd524d" :checked="form.favoriteId != null && form.favoriteId != undefined && form.favoriteId != 'null'" @click="onFavClick" />

        <!-- 评分评价-->
        <uni-forms-item style="margin-top: 20px;" label="发表评价" name="score">
          <u-rate v-model="commentForm.rating" :count="5"></u-rate>
          <u--textarea style="margin-top: 20px;" :maxlength="200" v-model="commentForm.reviewText" placeholder="请输入内容" ></u--textarea>
          <u-button style="margin-top: 20px;margin-bottom: 20px;" type="success" size="normal" @click="showPopup">评价</u-button>
        </uni-forms-item>

      </uni-forms>

    </view>
    <uni-section title="评价列表" class="uni-section-with-margin">
      <uni-list style="margin: 10px" :border="true" v-for="(item, index) in reviewList" :key="index">
        <!-- 左边名字头像，右边评分评价 -->

        <view class="uni-list-cell" style="display: flex; flex-direction: column;">
          <view style="display: flex; align-items: flex-start;">
            <u-avatar :src="formatUrl(item.avatar)" size="40"></u-avatar>
            <view class="uni-list-cell__container" style="flex: 1; margin-left: 10px;">
              <view class="uni-list-cell__text">{{ item.userName }}</view>
              <view class="uni-list-cell__note">{{ item.reviewDate }}</view>
            </view>
            <view class="uni-list-cell__extra" style="display: flex; flex-direction: column; align-items: flex-end; margin-left: 10px;">
              <u-rate :readonly="true" :value="item.rating" :count="5"></u-rate>
            </view>
          </view>
          <view class="uni-list-cell__review" style="margin-top: 10px; width: 100%;">
            <u--textarea :maxlength="200" v-model="item.reviewText" placeholder="请输入内容" disabled count></u--textarea>
          </view>
        </view>
      </uni-list>
    </uni-section>
  </view>
</template>


<script>
import { getArtifact } from "@/api/system/artifact";
import config from '@/config';
import { addFavorite,delFavorite } from "@/api/system/favorite";
import {addReview} from "@/api/system/review";
import {listReview} from "@/api/system/review";

export default {
  data() {
    return {
      form: {
        favoriteId: null
      },
      commentForm: {
        rating: 5,
        reviewText:''
      },
      reviewList: []
    }
  },
  created() {

  },
  onLoad(params) {
    let id = params.id;
    getArtifact(id).then(response => {
      this.form = response.data
    })
    listReview({artifactId:id}).then(res => {
      this.reviewList = res.rows
    }).catch(error => {
      uni.showToast({
        title: '获取评论列表失败:'+error.msg,
        icon: 'none'
      })
    })
  },

  methods: {
    getUrl(url) {
      return [config.baseUrl + url]
    },
    formatUrl(url) {
      if (url) {
        return config.baseUrl + url
      }
      return require('@/static/images/user.png')
    },
    favorite() {
      let data = {
        'artifactId': this.form.artifactId
      }
      addFavorite(data).then(response => {
        uni.showToast({
          title: '收藏成功',
          icon: 'none'
        })
        getArtifact(this.form.artifactId).then(response => {
          this.form = response.data
        })
      }).catch(error => {
        uni.showToast({
          title: '收藏失败:'+error.msg,
          icon: 'none'
        })
      })
    },
    cancelFavorite() {
      delFavorite(this.form.favoriteId).then(response => {
        uni.showToast({
          title: '取消收藏成功',
          icon: 'none'
        })
        getArtifact(this.form.artifactId).then(response => {
          this.form = response.data
        })
      }).catch(error => {
        uni.showToast({
          title: '取消收藏失败:'+error.msg,
          icon: 'none'
        })
      })
    },
    showPopup() {
      if (!this.commentForm.reviewText) {
        return this.$modal.showToast('请输入评价内容')
      }
      let data = {
        'artifactId': this.form.artifactId,
        'rating': this.commentForm.rating,
        'reviewText': this.commentForm.reviewText
      }
      addReview(data).then(response => {
        uni.showToast({
          title: '评价成功',
          icon: 'none'
        })
        listReview({artifactId:this.form.artifactId}).then(res => {
          this.reviewList = res.rows
		  this.commentForm.rating = '5'
		  this.commentForm.reviewText = ''
        }).catch(error => {
          uni.showToast({
            title: '获取评论列表失败:'+error.msg,
            icon: 'none'
          })
        })
      }).catch(error => {
        uni.showToast({
          title: '评价失败:'+error.msg,
          icon: 'none'
        })
      })
    },
    onFavClick() {
      if (this.form.favoriteId) {
        this.cancelFavorite()
      } else {
        this.favorite()
      }
    }
  }
}
</script>

<style scoped lang="scss">
.album {
  @include flex;
  align-items: flex-start;

  &__avatar {
    background-color: $u-bg-color;
    padding: 5px;
    border-radius: 3px;
  }

  &__content {
    margin-left: 10px;
    flex: 1;
  }
}

.example {
  margin: 20px;
}

.uni-list-cell {
  background-color: beige;
  display: flex;
  flex-direction: column;
  padding: 10px;
  border-bottom: 1px solid #e5e5e5;
}

.uni-list-cell__container {
  flex: 1;
  margin-left: 10px;
}

.uni-list-cell__text {
  font-size: 16px;
  font-weight: bold;
}

.uni-list-cell__note {
  font-size: 14px;
  color: #999;
}

.uni-list-cell__extra {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  margin-left: 10px;
}

.uni-list-cell__review {
  margin-top: 10px;
  width: 100%;
}

.u--textarea {
  width: 100%;
  min-height: 60px;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 8px;
  box-sizing: border-box;
}

.uni-section-with-margin {
  padding-bottom: 20px;
  margin-bottom: 20px;
}
</style>
